<template>
    <div>
        <van-field
            readonly
            clickable
            :label="data.options.label"
            :value="data.options.defaultValue"
            :placeholder="data.options.placeholder"
            @click="showPicker = true"
        />

        <van-popup v-model="showPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="data.options.options"
                @cancel="showPicker = false"
                @confirm="onConfirm"
            />
        </van-popup>
    </div>
</template>
<script>
import { Popup, Picker, Field } from 'vant'
export default {
    name: 'FormSelect',
    components: {
        [Popup.name]: Popup,
        [Picker.name]: Picker,
        [Field.name]: Field
    },
    props: {
        data: {
            type: Object
        }
    },
    data() {
        return {
            showPicker: false
        }
    },
    methods: {
        onConfirm(value) {
            this.showPicker = false
            this.data.options.defaultValue = value.value
        }
    }
}
</script>
